<template>
  <div class="annotationCard" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"
    :class="{ hovered: isHovered, highlighted: isHighlighted }">
    <div class="left">
      <img :src="content.imgUrl" alt="avatar" />
    </div>
    <div class="right">
      <p class="name" @click="toggleInput">
        {{ content.name }}
        <span v-if="isHovered" class="time"> {{ content.time }}</span>
        <el-icon class="close" @click.stop="closeCard">
          <Close class="close" />
        </el-icon>
      </p>
      <el-input v-if="showInput" v-model="content.content" type="textarea" size="large" placeholder="请输入批注"></el-input>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Close } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus';
const props = defineProps({
  content: {
    type: Object,
    required: true,
  },
  annotationId: {
    type: Number,
    required: true,
  },
});

const isHovered = ref(false);
const showInput = ref(false);
const emit = defineEmits(['close']);

const isHighlighted = computed(() => props.annotationId === props.content.id);

const handleMouseEnter = () => {
  console.log('handleMouseEnter is called');
  isHovered.value = true;
};

const handleMouseLeave = () => {
  console.log('handleMouseLeave is called');
  isHovered.value = false;
  showInput.value = false; // 当鼠标移开时隐藏输入框
};

const toggleInput = () => {
  console.log('toggleInput is called');
  showInput.value = true;
};

const closeCard = () => {
  console.log('closeCard is called');
  ElMessageBox.confirm(
    '此操作将永久删除该批注, 是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage.success('删除成功');
      emit('close', props.content.id); // 修改此行，触发事件并传递批注的ID
    })
    .catch(() => {
      ElMessage.info('已取消');
    });
}
</script>

<style scoped>
.annotationCard {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 10px;
  width: 90%;
  height: auto;
  transition: border 0.3s, transform 0.3s, box-shadow 0.3s;
  background-color: white;
}

.left {
  margin: 5px;
}

.right {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 5px;
  width: 100%;
}

.hovered {
  border: 1px solid red;
}

.highlighted {
  border: 2px solid blue;
  background-color: #fffacd;
  /* 淡黄色背景 */
  transform: translateY(-5px);
  /* 略向上升 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 阴影效果 */
}

.time {
  display: inline;
  color: grey;
  font-size: 12px;
}

.el-input {
  margin-top: 5px;
  font-size: 12px;
  padding: 5px;
  width: 100%;
}

img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.close {
  position: absolute;
  /* 绝对定位 */
  top: 0px;
  /* 距离顶部 10px */
  right: 0px;
  /* 距离右侧 10px */
  cursor: pointer;
}
</style>